<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>glTF Viewer</title>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="./style.e308ff8e.css" />
  <script src="./app.a6a4d504.js"></script>
  <script src="./style.e308ff8e.js"></script>
  <!-- <link rel="stylesheet" href="/gltf_thumbnail/style.e308ff8e.css">
  <script src="/gltf_thumbnail/app.a6a4d504.js"></script>
<script src="/gltf_thumbnail/style.e308ff8e.js"></script> -->
  <style>
    .save-btn {
      position: absolute;
      bottom: 0;
      right: 15px;
      z-index: 99;
      background: rgba(81, 221, 233, 0.8);
      border: 1px solid rgba(81, 221, 233, 0.8);
      border-radius: 2px;
      line-height: 26px;
      width: 60px;
      color: #ffffff;
      cursor: pointer;
    }
    html,
    body {
      background: transparent;
    }

    .placeholder {
      width: 85%;
      background: rgba(255, 255, 255, 0.2);
    }
  </style>
</head>
<body>
  <!-- <header>
    <h1><a href="/">glTF Viewer</a></h1>
    <span class="separator layout-md"> | </span>
    <a class="item layout-md" target="_blank" href="https://github.com/mrdoob/three.js/tree/r126">
      three.js r126
    </a>
    <span class="separator layout-md"> | </span>
    <a class="item layout-md" target="_blank" href="https://github.com/mrdoob/three.js/blob/r126/examples/js/loaders/GLTFLoader.js">
      THREE.GLTFLoader@r126
    </a>
    <span class="separator"> | </span>
    <a class="item" target="_blank" href="https://github.com/donmccurdy/three-gltf-viewer/issues/new">
      help & feedback
    </a>
    <span class="separator"> | </span>
    <a class="item" target="_blank" href="https://github.com/donmccurdy/three-gltf-viewer">
      source
    </a>
    <span class="flex-grow"></span>
    <button id="download-btn" class="item" style="display: none;">⬇&nbsp;&nbsp;&nbsp;Download</button>
  </header> -->
  <main class="wrap">
    <button class="save-btn">保存</button>
    <div class="dropzone">
      <div class="placeholder">
        <p>拖拽glTF 2.0格式的文件到这里</p>
      </div>
      <div class="upload-btn">
        <input type="file" name="file-input[]" id="file-input" multiple="" />
        <label for="file-input">
          <span>选择上传文件</span>
        </label>
      </div>
    </div>
    <div class="spinner"></div>
  </main>
  <script type="text/x-handlebars-template" id="report-toggle-template">
    <div class="report-toggle level-{{issues.maxSeverity}}">
      <div class="report-toggle-text">
        {{#if issues}}
          {{#if issues.numErrors}}
            {{issues.numErrors}} errors.
          {{else if issues.numWarnings}}
            {{issues.numWarnings}} warnings.
          {{else if issues.numHints}}
            {{issues.numHints}} hints.
          {{else if issues.numInfos}}
            {{issues.numInfos}} notes.
          {{else}}
            Model details
          {{/if}}
        {{else if reportError}}
          Validation could not run: {{reportError}}.
        {{else}}
          Validation could not run.
        {{/if}}
      </div>
      <div class="report-toggle-close" aria-label="Hide">
        &times;
      </div>
    </div>
  </script>
  <script type="text/x-handlebars-template" id="report-template">
    <!DOCTYPE html>
    <title>glTF 2.0 validation report</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
    <link rel="stylesheet" href="{{location.protocol}}//{{location.host}}/style.css">
    <style>
      body { overflow-y: auto; }
    </style>
    <div class="report">
      <h1>Validation report</h1>
      <ul>
        <li><b>Format:</b> glTF {{info.version}}</li>
        {{#if generator}}
          <li>
            <b>Generator:</b> {{generator.name}}
            {{#if generator.docsURL}}(<a href="{{generator.docsURL}}" target="_blank">docs</a>){{/if}}
            {{#if generator.bugsURL}}(<a href="{{generator.bugsURL}}" target="_blank">bugs</a>){{/if}}
          </li>
        {{else}}
          <li><b>Generator:</b> {{info.generator}}</li>
        {{/if}}
        {{#if info.extras}}
          {{#if info.extras.title}}<li><b>Title:</b> {{info.extras.title}}</li>{{/if}}
          {{#if info.extras.author}}<li><b>Author:</b> {{{info.extras.author}}}</li>{{/if}}
          {{#if info.extras.license}}<li><b>License:</b> {{{info.extras.license}}}</li>{{/if}}
          {{#if info.extras.source}}<li><b>Source:</b> {{{info.extras.source}}}</li>{{/if}}
        {{/if}}
        <li>
          <b>Stats:</b>
          <ul>
            <li>{{info.drawCallCount}} draw calls</li>
            <li>{{info.animationCount}} animations</li>
            <li>{{info.materialCount}} materials</li>
            <li>{{info.totalVertexCount}} vertices</li>
            <li>{{info.totalTriangleCount}} triangles</li>
          </ul>
        </li>
        <li>
          <b>Extensions:</b> {{#unless info.extensionsUsed}}None{{/unless}}
          {{#if info.extensionsUsed}}
            <ul>
            {{#each info.extensionsUsed}}
              <li>{{this}}</li>
            {{/each}}
            </ul>
            <p><i>
              NOTE: Extensions above are present in the model, but may or may not be recognized by this
              viewer. Any "UNSUPPORTED_EXTENSION" warnings below refer only to extensions that could not
              be scanned by the validation suite, and may still have rendered correctly. See:
              <a href="https://github.com/donmccurdy/three-gltf-viewer/issues/122" target="_blank">three-gltf-viewer#122</a>
          {{/if}}
        </li>
      </ul>
      <hr/>
      <p>
        Report generated by
        <a href="https://github.com/KhronosGroup/glTF-Validator/">KhronosGroup/glTF-Validator</a>
        {{validatorVersion}}.
      </p>
      {{#if issues.numErrors}}
        {{> issuesTable messages=errors color="#f44336" title="Error"}}
      {{/if}}
      {{#if issues.numWarnings}}
        {{> issuesTable messages=warnings color="#f9a825" title="Warning"}}
      {{/if}}
      {{#if issues.numHints}}
        {{> issuesTable messages=hints color="#8bc34a" title="Hint"}}
      {{/if}}
      {{#if issues.numInfos}}
        {{> issuesTable messages=infos color="#2196f3" title="Info"}}
      {{/if}}
    </div>
  </script>
  <script type="text/x-handlebars-template" id="report-table-partial">
    <table class="report-table">
      <thead>
        <tr style="background: {{color}};">
          <th>
            {{title}}
          </th>
          <th>
            Message
          </th>
          <th>
            Pointer
          </th>
        </tr>
      </thead>
      <tbody>
        {{#each messages}}
          <tr>
            <td>
              <code>
                {{code}}
              </code>
            </td>
            <td>
              {{message}}
            </td>
            <td>
              <code>
                {{pointer}}
              </code>
            </td>
          </tr>
        {{/each}}
        {{#unless issues.messages}}
          <tr>
            <td colspan="3">
              No issues found.
            </td>
          </tr>
        {{/unless}}
      </tbody>
    </table>
  </script>
  <script>
    function sendMessage(msg) {
      // Make sure you are sending a string, and to stringify JSON
      window.parent.postMessage(msg, '*');
    }

    var eles = document.querySelector('.save-btn');
    eles.addEventListener(
      'click',
      function() {
        // window.saveImg = true;
        // setTimeout(() => {
        //   sendMessage(window.imgData);
        // }, 3000);
        window.__app.upload(
          'http://223.112.163.214:9001/wxtc-service/api/gltf-models/upload',
          // 'http://dev.arcgisonline.cn/wxtc-service/api/gltf-models/upload',
          'test',
        ); // window.__app.__proto__.upload('http://dev.arcgisonline.cn/wxtc-service/api/gltf-models/upload', 'test')
        // window.__app.uploadUrl(data.uploadUrl, data.userName)
      },
      false,
    );
    window.addEventListener('message', function(e) {
      // console.log(e.data)
      // alert(e.data);
      var data = JSON.stringify(e.data);
      window.userName = data.userName;
      window.uploadUrl = data.uploadUrl; // window.userName = e.data;
    });
  </script>
</body>
